<!DOCTYPE HTML>
<html lang>
<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="腾宇的个人博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="https://gitee.com/bingtengaoyu/blog">
    <!--SEO-->

    <meta name="keywords" content>


    <meta name="description" content="@(作者)[腾宇]

技术栈：  react + less + webpack + babel模板地址：https://github.com/gengbingbing/react-npm-tem...">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">

    <!--Title-->


<title>React 发布npm插件库 | 腾宇的个人博客</title>


    <link rel="alternate" href="/atom.xml" title="腾宇的个人博客" type="application/atom+xml">


    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.5.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">




    
	<div class="hide">
		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
		</script>
	</div>






    

</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header"  style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)"  >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='耿兵兵'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                 <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://gitee.com/bingtengaoyu/blog">腾宇的个人博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog"><i class="fa "></i>Home</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/vuetools/#/"><i class="fa "></i>vue插件</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/reactantd/#/"><i class="fa "></i>reactAnt模板</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/home/"><i class="fa "></i>简介</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="http://gank.io/"><i class="fa "></i>工具</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="React 发布npm插件库">
            
	            React 发布npm插件库
            
        </h1>
        <div class="post-meta">
    
        <span class="categories-meta fa-wrap">
            <i class="fa fa-folder-open-o"></i>
            
        </span>
    

    
        <span class="fa-wrap">
            <i class="fa fa-tags"></i>
            <span class="tags-meta">
                
            </span>
        </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2019/09/15</span>
        </span>
        
    
</div>
            
            
    </div>
    
    <div class="post-body post-content">
        <p>@(作者)[腾宇]</p>
<blockquote>
<p>技术栈：  react + less + webpack + babel<br>模板地址：<a href="https://github.com/gengbingbing/react-npm-template.git" target="_blank" rel="noopener">https://github.com/gengbingbing/react-npm-template.git</a></p>
</blockquote>
<h2 id="一、搭建框架或下载模板"><a href="#一、搭建框架或下载模板" class="headerlink" title="一、搭建框架或下载模板"></a>一、搭建框架或下载模板</h2><h3 id="1、初始化项目"><a href="#1、初始化项目" class="headerlink" title="1、初始化项目"></a>1、初始化项目</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mkdir react-npm-template</span><br><span class="line">cd react-npm-template</span><br><span class="line">npm init</span><br></pre></td></tr></table></figure>

<p><strong>根据提示输入配置信息后，将看到 package.json 文件已创建。</strong></p>
<h3 id="2、安装一些npm依赖"><a href="#2、安装一些npm依赖" class="headerlink" title="2、安装一些npm依赖"></a>2、安装一些npm依赖</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm install react react-dom prop-types -S</span><br><span class="line">npm install webpack webpack-cli webpack-dev-server -D</span><br><span class="line">npm install @babel/core @babel/preset-env @babel/preset-react babel-loader -D</span><br><span class="line">npm install html-webpack-plugin -D</span><br><span class="line">npm install style-loader css-loader less less-loader -D</span><br></pre></td></tr></table></figure>

<h3 id="3、配置package-json"><a href="#3、配置package-json" class="headerlink" title="3、配置package.json"></a>3、配置package.json</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"name"</span>: <span class="string">"react-npm-template"</span>,</span><br><span class="line">  <span class="string">"version"</span>: <span class="string">"0.0.1"</span>,</span><br><span class="line">  <span class="string">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="string">"main"</span>: <span class="string">"dist/index.js"</span>,</span><br><span class="line">  <span class="string">"scripts"</span>: &#123;</span><br><span class="line">    <span class="string">"build"</span>: <span class="string">"webpack --env.NODE_ENV=production"</span>,</span><br><span class="line">    <span class="string">"start"</span>: <span class="string">"webpack-dev-server --hot --open"</span>,</span><br><span class="line">    <span class="string">"dev"</span>: <span class="string">"npm run start"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"files"</span>: [</span><br><span class="line">    <span class="string">"dist"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="string">"author"</span>: <span class="string">"tengyu"</span>,</span><br><span class="line">  <span class="string">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="string">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="string">"prop-types"</span>: <span class="string">"^15.7.2"</span>,</span><br><span class="line">    <span class="string">"react"</span>: <span class="string">"^16.9.0"</span>,</span><br><span class="line">    <span class="string">"react-dom"</span>: <span class="string">"^16.9.0"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"devDependencies"</span>: &#123;</span><br><span class="line">    <span class="string">"@babel/core"</span>: <span class="string">"^7.6.0"</span>,</span><br><span class="line">    <span class="string">"@babel/preset-env"</span>: <span class="string">"^7.6.0"</span>,</span><br><span class="line">    <span class="string">"@babel/preset-react"</span>: <span class="string">"^7.0.0"</span>,</span><br><span class="line">    <span class="string">"babel-loader"</span>: <span class="string">"^8.0.6"</span>,</span><br><span class="line">    <span class="string">"css-loader"</span>: <span class="string">"^3.2.0"</span>,</span><br><span class="line">    <span class="string">"eslint"</span>: <span class="string">"^6.3.0"</span>,</span><br><span class="line">    <span class="string">"eslint-friendly-formatter"</span>: <span class="string">"^4.0.1"</span>,</span><br><span class="line">    <span class="string">"eslint-loader"</span>: <span class="string">"^3.0.0"</span>,</span><br><span class="line">    <span class="string">"eslint-plugin-react"</span>: <span class="string">"^7.14.3"</span>,</span><br><span class="line">    <span class="string">"file-loader"</span>: <span class="string">"^4.2.0"</span>,</span><br><span class="line">    <span class="string">"html-webpack-plugin"</span>: <span class="string">"^3.2.0"</span>,</span><br><span class="line">    <span class="string">"less"</span>: <span class="string">"^3.10.3"</span>,</span><br><span class="line">    <span class="string">"less-loader"</span>: <span class="string">"^5.0.0"</span>,</span><br><span class="line">    <span class="string">"style-loader"</span>: <span class="string">"^1.0.0"</span>,</span><br><span class="line">    <span class="string">"url-loader"</span>: <span class="string">"^2.1.0"</span>,</span><br><span class="line">    <span class="string">"webpack"</span>: <span class="string">"^4.39.3"</span>,</span><br><span class="line">    <span class="string">"webpack-cli"</span>: <span class="string">"^3.3.8"</span>,</span><br><span class="line">    <span class="string">"webpack-dev-server"</span>: <span class="string">"^3.8.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>main： 为打包后的出口文件；</strong></li>
<li><strong>scripts： 为 webpack 命令配置；</strong></li>
<li><strong>files： 为推送到 npm 仓库所包括的文件。</strong></li>
</ul>
<h3 id="4、配置-babel"><a href="#4、配置-babel" class="headerlink" title="4、配置 babel"></a>4、配置 babel</h3><p><strong>根目录下新建 .babelrc 文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"presets"</span>: [</span><br><span class="line">    <span class="string">"@babel/preset-env"</span>,</span><br><span class="line">    <span class="string">"@babel/preset-react"</span></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5、创建-webpack-相关文件"><a href="#5、创建-webpack-相关文件" class="headerlink" title="5、创建 webpack 相关文件"></a>5、创建 webpack 相关文件</h3><p>webpack.config.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function">(<span class="params">env</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (env &amp;&amp; env.NODE_ENV === <span class="string">'production'</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">require</span>(<span class="string">'./webpack.prod.config.js'</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">require</span>(<span class="string">'./webpack.dev.config.js'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>webpack.dev.config.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="keyword">const</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    entry: <span class="string">'./src/app.js'</span>,</span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">        path: path.resolve(__dirname, <span class="string">'dist'</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">                use: <span class="string">'babel-loader'</span>,</span><br><span class="line">                exclude: <span class="regexp">/node_modules/</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.(le|c)ss$/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">'style-loader'</span>,</span><br><span class="line">                    <span class="string">'css-loader'</span>,</span><br><span class="line">                    &#123;</span><br><span class="line">                        loader: <span class="string">'less-loader'</span>, <span class="attr">options</span>: &#123;</span><br><span class="line">                            javascriptEnabled: <span class="literal">true</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.(jpg|jpeg|git|png|svg|bmp)$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">'url-loader'</span>,</span><br><span class="line">                    options: &#123;</span><br><span class="line">                        limit: <span class="number">10000</span>,</span><br><span class="line">                        name: <span class="string">'images/[name]-[hash:8].[ext]'</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.(ttf|svg|eot|woff|woff2)$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">'url-loader'</span>,</span><br><span class="line">                    options: &#123;</span><br><span class="line">                        name: <span class="string">'fonts/[name]-[hash:8].[ext]'</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        contentBase: <span class="string">'./dist'</span>,</span><br><span class="line">        port: <span class="number">8888</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">            template: <span class="string">'public/index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>webpack.prod.config.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'production'</span>,</span><br><span class="line">    entry: <span class="string">'./src/index.js'</span>,</span><br><span class="line">    output: &#123;</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">        path: path.resolve(__dirname, <span class="string">'dist'</span>),</span><br><span class="line">        libraryTarget: <span class="string">'commonjs2'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">                use: <span class="string">'babel-loader'</span>,</span><br><span class="line">                exclude: <span class="regexp">/node_modules/</span></span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.(le|c)ss$/</span>,</span><br><span class="line">                use: [</span><br><span class="line">                    <span class="string">'style-loader'</span>,</span><br><span class="line">                    <span class="string">'css-loader'</span>,</span><br><span class="line">                    &#123;</span><br><span class="line">                        loader: <span class="string">'less-loader'</span>, <span class="attr">options</span>: &#123;</span><br><span class="line">                            javascriptEnabled: <span class="literal">true</span></span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="6、创建组件"><a href="#6、创建组件" class="headerlink" title="6、创建组件"></a>6、创建组件</h3><p>在src中创建自己的业务组件或UI组件-具体见实例<br><a href="https://github.com/gengbingbing/react-npm-template.git" target="_blank" rel="noopener">https://github.com/gengbingbing/react-npm-template.git</a></p>
<h2 id="二、启动测试"><a href="#二、启动测试" class="headerlink" title="二、启动测试"></a>二、启动测试</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm run start  || npm run dev</span><br><span class="line"></span><br><span class="line">npm build</span><br></pre></td></tr></table></figure>

<h2 id="三、上传组件至npm库"><a href="#三、上传组件至npm库" class="headerlink" title="三、上传组件至npm库"></a>三、上传组件至npm库</h2><h3 id="1、首先需要切换-npm-源"><a href="#1、首先需要切换-npm-源" class="headerlink" title="1、首先需要切换 npm 源"></a>1、首先需要切换 npm 源</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config <span class="keyword">set</span> registry http://registry.npmjs.org</span><br></pre></td></tr></table></figure>

<h3 id="2、添加-npm-账号，根据提示完成信息输入"><a href="#2、添加-npm-账号，根据提示完成信息输入" class="headerlink" title="2、添加 npm 账号，根据提示完成信息输入"></a>2、添加 npm 账号，根据提示完成信息输入</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm adduser</span><br></pre></td></tr></table></figure>

<h3 id="3、上传组件"><a href="#3、上传组件" class="headerlink" title="3、上传组件"></a>3、上传组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm publish</span><br></pre></td></tr></table></figure>

<h3 id="4、下载测试"><a href="#4、下载测试" class="headerlink" title="4、下载测试"></a>4、下载测试</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install react-npm-template</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在项目中</span></span><br><span class="line"><span class="keyword">import</span> &#123; Button &#125; <span class="keyword">from</span> <span class="string">'react-npm-template'</span>;</span><br></pre></td></tr></table></figure>


    </div>
    
    <div class="post-footer">
        <div>
            
                转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/blog/2020/03/28/NodeJS开发npm脚手架/" class="pre-post btn btn-default" title='Node 开发npm脚手架（类似vue-cli）'>
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs">Node 开发npm脚手架（类似vue-cli）</span>
        </a>
    
    
        <a href="/blog/2019/08/12/React-umi的那些事/" class="next-post btn btn-default" title='React - Umi配置的那些事'>
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs">React - Umi配置的那些事</span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    
</div>


    <div id="comments">
        
	
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/blog/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'xOKV9J4UeQAtVkvnJC7Kq2Jn-gzGzoHsz',
            appKey: 'erIpQac4azoCmgfBB7Dl9maa',
            placeholder: '说点什么吧',
            notify: false,
            verify: true,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: ''.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">Table of Contents</h3>
        
            <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#一、搭建框架或下载模板"><span class="toc-text">一、搭建框架或下载模板</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1、初始化项目"><span class="toc-text">1、初始化项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2、安装一些npm依赖"><span class="toc-text">2、安装一些npm依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3、配置package-json"><span class="toc-text">3、配置package.json</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4、配置-babel"><span class="toc-text">4、配置 babel</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5、创建-webpack-相关文件"><span class="toc-text">5、创建 webpack 相关文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6、创建组件"><span class="toc-text">6、创建组件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#二、启动测试"><span class="toc-text">二、启动测试</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三、上传组件至npm库"><span class="toc-text">三、上传组件至npm库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1、首先需要切换-npm-源"><span class="toc-text">1、首先需要切换 npm 源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2、添加-npm-账号，根据提示完成信息输入"><span class="toc-text">2、添加 npm 账号，根据提示完成信息输入</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3、上传组件"><span class="toc-text">3、上传组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4、下载测试"><span class="toc-text">4、下载测试</span></a></li></ol></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy; 2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>







<script src="/blog/js/app.js?rev=@@hash"></script>

</body>
</html>